<template>
  <view class="mask" style="display: flex; align-items: center; justify-content: center">
    <view class="bg">
      <view class="rotary-table">
        <mosowe-rotary-table ref="rotaryTableRef" :list="list" :radius="280" @start="start"
          @end="end"></mosowe-rotary-table>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  const list = [
    {
      title: '保温壶',
      bgColor: '#fff',
      color: '#E31010',
      size:52,
    },
    {
      title: '春联',
      bgColor: '#FDEEAB',
      color: '#E31010',
       size:52,
    },
    {
      title: '卫生纸',
      bgColor: '#fff',
      color: '#E31010',
       size:52,
    },
    {
      title: '洗衣液',
      bgColor: '#FDEEAB',
      color: '#E31010',
       size:52,
    },
    {
      title: '雨伞',
      bgColor: '#fff',
      color: '#E31010',
       size:52,
    },
    {
      title: '手机',
      bgColor: '#FF1F05',
      color: '#fff',
       size:52,
    },
  ]
  const rotaryTableRef = ref<any>(null)
  // 点击中心抽奖按钮
  const start = () => {
    rotaryTableRef.value?.begin() // 开始转
    // ...中间请求下接口，查询中奖序号
    setTimeout(() => {
      // 准备结束转动，参数数字代表中奖项，即list列表的第几个，从1开始算
      rotaryTableRef.value?.stop(3)
    }, 1000)
  }
  // 转盘停止转动
  const end = () => {
    uni.showToast({
      title: '66666666',
    })
  }
</script>

<style lang="scss" scoped>
  .mask {
    width: 100vw;
    height: 100%;
    background: #000;
    position: fixed;
    left: 0;
    top: 0;
  }

  .bg {
    padding:60rpx;
    background-image: url(@/static/images/staticbg.png);
    background-size: cover;
    background-repeat: no-repeat;
    display:flex;
  }
</style>
